<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 横向柱状图滚动</title>
    <!-- 引入 ECharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        #chart {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        // 等待文档加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化图表
            var myChart = echarts.init(document.getElementById('chart'));

            // 数据
            var data = [
                {name: '北京', value: 100},
                {name: '上海', value: 95},
                {name: '广州', value: 90},
                {name: '深圳', value: 88},
                {name: '杭州', value: 86},
                {name: '武汉', value: 84},
                {name: '成都', value: 82},
                {name: '西安', value: 80},
                {name: '重庆', value: 78},
                {name: '南京', value: 76},
                {name: '长沙', value: 74}
            ];

            // 分离前三名和其他数据
            var topThree = data.slice(0, 3);
            var others = data.slice(3);
            // 只显示后面4条数据
            var displayCount = 4;
            var displayOthers = others.slice(0, displayCount);

            // 前三名的颜色
            var topColors = ['#FF4545', '#FF8C69', '#FFA500'];
            // 其他的颜色
            var normalColor = '#2F4F4F';

            // 配置项
            var option = {
                title: {
                    text: '城市数据排名',
                    left: 'center'
                },
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        return params.name + ': ' + params.value;
                    }
                },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: [...topThree.map(item => item.name), ...displayOthers.map(item => item.name)],
                    inverse: true, // 反转Y轴
                    axisLabel: {
                        fontSize: 14,
                        color: function(value, index) {
                            return index < 3 ? topColors[index] : normalColor;
                        }
                    }
                },
                series: [{
                    name: '数值',
                    type: 'bar',
                    data: [...topThree.map((item, index) => {
                        return {
                            value: item.value,
                            itemStyle: {
                                color: topColors[index]
                            }
                        };
                    }), ...displayOthers.map(item => {
                        return {
                            value: item.value,
                            itemStyle: {
                                color: normalColor
                            }
                        };
                    })],
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}'
                    }
                }]
            };

            // 设置图表配置项
            myChart.setOption(option);

            // 后面数据滚动动画
            let currentIndex = 0;
            setInterval(() => {
                // 更新显示的数据
                displayOthers = others.slice(currentIndex, currentIndex + displayCount);
                
                // 更新图表数据
                option.yAxis.data = [...topThree.map(item => item.name), ...displayOthers.map(item => item.name)];
                option.series[0].data = [
                    ...topThree.map((item, index) => ({
                        value: item.value,
                        itemStyle: { color: topColors[index] }
                    })),
                    ...displayOthers.map(item => ({
                        value: item.value,
                        itemStyle: { color: normalColor }
                    }))
                ];
                
                // 更新图表
                myChart.setOption(option);
                
                // 更新索引
                currentIndex = (currentIndex + 1) % (others.length - displayCount + 1);
            }, 2000);

            // 自适应窗口大小
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        });
    </script>
</body>
</html> 